<template>
  <div class="login-regist">
    <minor-header title="登录&注册"></minor-header>
    <div id="main" class="f-fe-fs">
      <el-tabs v-model="activeName" @tab-click="onTab">
        <el-tab-pane id="psd-box" label="密码登录" name="psd">
          <el-form
            :model="psdForm"
            status-icon
            :rules="psdFormRules"
            ref="psdForm"
            label-width="70px"
            @keyup.enter.native="login('psd')"
          >
            <el-form-item label="手机号" prop="tel">
              <el-input
                v-model="psdForm.tel"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="psd">
              <el-input
                type="password"
                v-model="psdForm.psd"
                autocomplete="off"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="captcha">
              <el-input
                v-model="psdForm.captcha"
                placeholder="请输入验证码"
                style="width: 145px"
              ></el-input>
              <img
                id="captcha-img"
                :src="captchaSrc"
                @click="updateCaptcha($event.target)"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="login('psd')"
                style="width: 150px"
                >登录</el-button
              >
              <el-button @click="resetForm('psdLogin')" style="width: 150px"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane id="sms-box" label="短信登录" name="sms">
          <el-form
            :model="smsForm"
            status-icon
            :rules="smsFormRules"
            ref="smsForm"
            label-width="70px"
            @keyup.enter.native="login('sms')"
          >
            <el-form-item label="手机号" prop="tel">
              <el-input
                v-model="smsForm.tel"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="captcha">
              <el-input
                v-model="smsForm.captcha"
                placeholder="请输入验证码"
                autocomplete="off"
                style="width: 145px"
              ></el-input>
              <el-button
                class="captcha-btn"
                style="width: 145px"
                type="primary"
                @click="getSmsCode"
                >获取验证码</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="login('sms')"
                style="width: 150px"
                >登录</el-button
              >
              <el-button @click="resetForm('smsLogin')" style="width: 150px"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane id="rgt-box" label="注册" name="rgt">
          <el-form
            :model="rgtForm"
            status-icon
            :rules="rgtFormRules"
            ref="rgtForm"
            label-width="80px"
            @keyup.enter.native="regist()"
          >
            <el-form-item label="手机号" prop="tel">
              <el-input
                v-model="rgtForm.tel"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="psd">
              <el-input
                type="password"
                v-model="rgtForm.psd"
                autocomplete="off"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="rePsd">
              <el-input
                type="password"
                v-model="rgtForm.rePsd"
                autocomplete="off"
                placeholder="请再次输入密码"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="regist()" style="width: 145px"
                >同意协议并注册</el-button
              >
              <el-button @click="resetForm('rgt')" style="width: 145px"
                >重置</el-button
              >
            </el-form-item>
            <el-form-item prop="isRead">
              <el-checkbox v-model="rgtForm.isRead"
                >已阅读并同意
                <router-link to="/registProtocol">XX协议</router-link>
              </el-checkbox>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <div id="others" class="f-fe-c">
          <router-link to="/foundPassword" v-show="activeName == 'psd'"
            >忘记密码？</router-link
          >
          <span v-show="activeName != 'rgt'" @click="activeName = 'rgt'"
            >免费注册</span
          >
        </div>
      </el-tabs>
    </div>
  </div>
</template>
<script>
//加密、记住密码参考网址： https://www.cnblogs.com/xiaolucky/p/11165179.html
import MinorHeader from "../components/section/MinorHeader.vue";
import { login, regist } from "../assets/api/user.js";
import md5 from "md5"; //加密js
import { Cookie } from "../../public/js/utility.js";
// import reg from "../../public/js/regexp.js";
// import {login,updateCaptcha} from "../../public/js/methods.js";
export default {
  name: "loginRegist",
  components: {
    MinorHeader,
  },
  data() {
    // let vdtPsdTel = this.validator("psdForm", "tel", "电话号码", reg.tel);
    // let vdtPsdPsd = this.validator("psdForm", "psd", "密码", reg.psd);
    // let vdtPsdCode = this.validator(
    //   "psdForm",
    //   "captcha",
    //   "验证码",
    //   reg.verifyCode
    // );
    // let vdtSmsTel = this.validator("psdForm", "tel", "电话号码", reg.tel);
    // let vdtSmsCode = this.validator(
    //   "psdForm",
    //   "captcha",
    //   "短信验证码",
    //   reg.smsCode
    // );
    // let vdtRgtTel = this.validator("rgtForm", "tel", "电话号码", reg.tel);
    // let vdtRgtPsd = this.validator("rgtForm", "psd", "密码", reg.psd);
    // let vdtRgtRePsd = (rule, val, cb) => {
    //   if (val.toString().length == 0) {
    //     cb(new Error("确认密码不能为空!"));
    //   } else if (this.rgtForm.psd !== val) {
    //     cb(new Error("两次输入密码不一致!"));
    //   } else {
    //     cb();
    //   }
    // };
    // let vdtRgtIsRead = (rule, val, cb) => {
    //   if (!val) {
    //     cb(new Error("需要同意协议才能注册!"));
    //   } else {
    //     cb();
    //   }
    // };
    return {
      activeName: "psd",
      captchaSrc: "http://www.hxov.com:7002/getCaptcha?type=data",
      psdForm: {
        tel: "18483221518",
        psd: "flc301415",
        captcha: "",
      },
      psdFormRules: {
        tel: [{ required: true, message: "电话号码不能为空", trigger: "blur" }],
        psd: [{ required: true, message: "密码不能为空", trigger: "blur" }],
        captcha: [
          { required: true, message: "验证码不能为空", trigger: "blur" },
        ],
      },
      smsForm: {
        tel: "",
        captcha: "",
      },
      smsFormRules: {
        // tel: [{ required: true, validator: vdtSmsTel, trigger: "blur" }],
        // captcha: [{ required: true, validator: vdtSmsCode, trigger: "blur" }],
      },
      rgtForm: {
        isRead: true, //不能写false，否则，不会提示required校验信息
        tel: "18483221518",
        psd: "flc301415",
        rePsd: "flc301415",
      },
      rgtFormRules: {
        tel: [{ required: true, message: "电话号码不能为空", trigger: "blur" }],
        psd: [{ required: true, message: "密码不能为空", trigger: "blur" }],
        rePsd: [{ required: true, message: "请再次确认密码", trigger: "blur" }],
        isRead: [
          { required: true, message: "需要同意协议才能注册", trigger: "blur" },
        ],
      },
    };
  },
  computed: {},
  methods: {
    onTab(tab) {
      let path = "";
      switch (tab.name) {
        case "psd":
          path = "/login/psd";
          break;
        case "sms":
          path = "/login/sms";
          break;
        case "rgt":
          path = "/regist";
          break;
      }
      this.$router.replace(path);
    },
    initTabByRoute() {
      switch (this.$route.params.type) {
        case "psd":
          this.activeName = "psd";
          break;
        case "sms":
          this.activeName = "sms";
          break;
        default:
          this.activeName = "rgt";
      }
    },
    validator(formName, vdtType, vdtName, regexp) {
      return (rule, val, cb) => {
        if (val.toString().length == 0) {
          cb(new Error("请输入" + vdtName));
        } else if (!new RegExp(regexp).test(val)) {
          cb(new Error("请输入正确的" + vdtName));
        } else {
          cb();
        }
      };
    },
    updateCaptcha(ele) {
      ele.src = ele.src.split("&")[0] + `&t=${new Date().getTime()}`;
    },
    getSmsCode() {
      //获取短信验证码
      this.$alert("暂未开通短信登录功能！", "提示", {
        confirmButtonText: "我知道了",
      });
    },
    login(type) {
      let formName = type + "Form";
      this.$refs[formName].validate(async (isValid) => {
        if (isValid) {
          let opts = JSON.parse(JSON.stringify(this[formName]));
          delete opts.isRead;
          opts.psd = md5(this[formName].psd);
          let { code, msg, data } = await login(opts);
          if (code === 1) {
            this.$message.success(msg);
            this.$router.go(-1);
            this.$store.commit("save", { path: "hasLogin", data: true });
            this.$store.commit("save", { path: "userInfo", data });
            new Cookie().set("tel", data.tel);
            // localStorage.setItem("userInfo",JSON.stringify(this.$store.state.userInfo));
          } else {
            this.$message.error(msg);
          }
          this.updateCaptcha(document.getElementById("captcha-img"));
        } else {
          this.$message.warning("请按提示准确填写信息！");
        }
      });
    },
    regist() {
      this.$refs.rgtForm.validate(async (isValid) => {
        if (isValid) {
          let opts = JSON.parse(JSON.stringify(this.rgtForm));
          delete opts.isRead;
          opts.psd = md5(opts.psd);
          let { code, msg } = await regist(opts);
          this.$message[code === 1 ? "success" : "error"](msg);
        } else {
          this.$message.warning("请按提示准确填写信息！");
        }
      });
    },
    // submitForm(formName) {
    //   this.$refs[formName].validate((isValid) => {
    //     if (isValid) {
    //       switch (formName) {
    //         case "psdForm":
    //           login("psd", this.psdForm, this);
    //           break;
    //         case "smsForm":
    //           login("sms", {}, this);
    //           break;
    //         case "rgtForm":
    //           this.regist({ tel: this.rgtForm.tel, psd: this.rgtForm.psd });
    //           break;
    //         default:
    //           break;
    //       }
    //     } else {
    //       this.$message.error("请按提示准确填写信息！");
    //     }
    //   });
    // },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created() {},
  mounted() {
    console.log(md5("flc301415"));
    this.initTabByRoute();
  },
};
</script>
<style lang="scss" scoped>
.el-button {
  width: 155px;
}
#main {
  height: calc(100vh - 80px);
  background: url(../assets/img/login_bg.jpg) no-repeat 0 0/100% 100%;
}
.el-tabs {
  padding: 15px 30px 30px;
  margin-top: 150px;
  margin-right: 15%;
  border-radius: $border-radius-base;
  background: $background-color-base;
  .el-tab-pane {
    width: 380px;
    padding: 0 20px;
  }
}
#captcha-img {
  height: 40px;
  width: 100px;
  vertical-align: bottom;
  margin-left: 15px;
  border-radius: $border-radius-base;
  background: #ddd;
}
.captcha-btn {
  margin-left: 18px;
}
#others {
  font-size: 14px;
  a {
    font-size: 14px;
    margin: 0 10px;
  }
  span {
    cursor: pointer;
  }
}
</style>